<template>
  <div style="width: 100%; height: 100%">
    <div class="echarts-view" :id="echartsid"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: ["echartsData", "title","echartsid"],
  mounted() {
    setTimeout(() => this.getViewEcharts(), 1000);
  },
  methods: {
    getViewEcharts() {
      let chartDom = document.getElementById(this.echartsid);
      let myChar = this.$echarts.init(chartDom);
      let option = {
        title: {
          text:
            `${this.title}${this.echartsData[0].value + this.echartsData[1].value}`,
          textStyle: {
            color: "#333333",
            fontFamily: "Microsoft YaHei",
            fontSize: 18,
            lineHeight: 26,
          },
          x: "center",
          y: "center",
        },
        // 鼠标经过显示数据
        tooltip: {
          trigger: "item",
          formatter: "{b} {c} ({d}%)",
        },
        //标签文本
        label: {
          color: "#666666",
          fontFamily: "Microsoft YaHei",
          fontSize: 14,
          lineHeight: 16,
          formatter: "{b} {d}%",
        },
        // 图例设置
        legend: {
          orient: "vertical",
          left: "0%",
          top: "15%",
          textStyle: {
            fontSize: "14px",
            fontWeight: 400,
            color: "#000000",
          },
          show: false,
        },
        series: [
          {
            type: "pie",
            radius: ["40%", "70%"],
            data: [
              {
                value: 2,
                name: "集团子公司",
              },
              {
                value: 3,
                name: "集团总公司",
              },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      option && myChar.setOption(option);
    },
  },
};
</script>

<style scoped>
.echarts-view {
  width: 100%;
  height: 100%;
}
</style>